<template>
    <div class="demo">
        <h2>📌 简单用法</h2>
        <p>
            <strong>预览</strong>
        </p>
        <div class="component-wrapper">
            <div class="component-wrapper-demo">
                <syxButtonGroup :data="datalist" :datas="datas" :downUpShow="true" :clearShow="true"></syxButtonGroup>
            </div>
            <div class="code-content" v-highlight style="height: 0;">
                <div class="code-content-height">
                    <pre><code class="html">{{codeStr}}</code></pre>
                </div>
            </div>
            <div class="lock-code" @click="showCode(0)" ref="xxx">
                <span class="lock-code-word">{{isShow[0] === false ? '显示代码' : '隐藏代码'}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    import mixin from '../mixin'

    export default {
        mixins: [mixin],
        components: {
        },
        data() {
            return {
                datalist: [{
                    name: "提示"
                }],
                datas:{
                    name: "提示",
                    placement: 'bottom',
                    checkList: [1, 2, 3],
                    checkLists: [1, 2, 3]
                },
                codeStr: `<syxButtonGroup :data="datalist" :datas="datas" :downUpShow="true" :clearShow="true"></syxButtonGroup>
 datalist: [{
                    name: "提示"
                }],
                datas:{
                    name: "提示",
                    placement: 'bottom',
                    checkList: [1, 2, 3],
                    checkLists: [1, 2, 3]
                }



源代码展示:
  <div class="box">
        <div>
            <el-button v-for="(v,i) in data" :key="i" :type="v.type" @click="Cli(i)">{{v.name}}</el-button>
            <el-popover
                    v-if="datas.checkLists && datas.checkLists.length>0"
                    :placement="datas.placement"
                    :width="datas.width || 400"
                    trigger="click">
                <el-checkbox-group v-model="datas.checkLists" @change="changeCheckList">
                    <el-checkbox v-for="(val,ial) in datas.checkList" :key="ial" :label="val"></el-checkbox>
                </el-checkbox-group>
                <el-button :type="datas.type" slot="reference">{{datas.name}}</el-button>
            </el-popover>
        </div>
        <div v-if="downUpShow || clearShow">
            <el-button v-if="downUpShow" @click="Cli('downUp')"
                       :icon="downUp?'el-icon-caret-bottom':'el-icon-caret-top'"
                       circle></el-button>
            <el-button v-if="clearShow" @click="Cli('clear')">重置</el-button>
        </div>
    </div>

     props: {
            /**
             * 按钮 数据
             */
            data: {
                type: Array,
                default: () => ([])
            },
            /**
             * 按钮是否有提示 数据
             */
            datas: {
                type: Object,
                default: () => ({})
            },
            /**
             * 上下按钮显示
             */
            downUpShow: {
                type: Boolean,
                default: () => (false)
            },
            /**
             * 清除按钮显示
             */
            clearShow: {
                type: Boolean,
                default: () => (false)
            },
        },
        data() {
            return {
                downUp: false,
                checkList: []
            }
        },
        methods: {
            /**
             * 点击按钮 将按钮下标传出去
             */
            Cli(i) {
                if (i === "downUp") {
                    this.downUp = !this.downUp
                }
                this.$emit("cli", i)
            },
            changeCheckList() {
                this.$emit("changeCheckList", this.datas['checkLists'])
            }
        }
    }


    .box {
        display: flex;
        justify-content: space-between;
    }
  .el-button{
    margin-right: 16px;
  }
        `
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>
